<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录--后台管理</title>
    <link rel="stylesheet" th:href="@{/assets/layui-v2.1.7/layui/css/layui.css}" href="../../static/assets/layui-v2.1.7/layui/css/layui.css" media="all" />
    <link rel="stylesheet" th:href="@{/css/login/login.css}" href="/static/css/login/login.css" media="all" />
</head>
<body>
<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920">
    <source th:src="@{/css/login/login.mp4}" src="/static/css/login/login.mp4" type="video/mp4">
</video>
<div class="video_mask"></div>
<div class="login">
    <h1>后台管理者登录</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <span id="msg"  style="color:red;"></span>
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="userName" value="hcj" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" value="1" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="color:white;">记住登入</label>
            <div class="layui-input-block">
                <input type="checkbox" name="rememberMe" checked lay-skin="switch" lay-filter="encrypt" lay-text="ON|OFF">
            </div>
        </div>
<!--
        <div class="layui-form-item form_code">
            <input class="layui-input" name="code" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
            <div class="code"><img src="../../images/code.jpg" width="116" height="36"></div>
        </div>
-->

        <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
    </form>
</div>


<script type="text/javascript" th:src="@{/webjars/jquery/2.1.1/jquery.min.js}"
        src="/webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"
        src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" th:src="@{/assets/layui-v2.1.7/layui/layui.js}" src="/static/assets/layui-v2.1.7/layui/layui.js" ></script>
<script type="text/javascript">
//    .config({
//        base : "/static/js/"
//    })
    layui.use(['form','layer'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery;
        //video
        $(window).resize(function(){
            if($(".video-player").width() > $(window).width()){
                //$(".video-player").css({"height":$(window).height(),"width":"auto","left":-($(".video-player").width()-$(window).width())/2});
                $(".video-player").css({"height":$(window).height(),"width":$(window).width()});
            }else{
                $(".video-player").css({"width":$(window).width(),"height":"auto","left":-($(".video-player").width()-$(window).width())/2});
            }
        }).resize();
        //
        form.on("submit(login)",function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            console.log(data.field); //得到美化后的DOM对象
            console.log(JSON.stringify(data.field));
            data.field.rememberMe = data.field.rememberMe == 'on' ? 'true' : 'false';
            $.post("/login",data.field ,function (r) {
                alert(JSON.stringify(r));
                console.log(r);
                if(r.success){
                    window.location.href = "/index/table";
                }
                $("#msg").html(r.msg);
            },'json').error(function (e) {
                alert("未知错误");
            });
            return false;
        });
    });
</script>
</body>
</html>
